<template>
  <div class="photos-toolbar">
    <div class="view-options">
      <button
        class="view-option"
        :class="{ active: viewMode === 'grid' }"
        @click="$emit('update:viewMode', 'grid')"
      >
        <i class="ri-grid-line"></i>
        <span>网格</span>
      </button>
      <button
        class="view-option"
        :class="{ active: viewMode === 'masonry' }"
        @click="$emit('update:viewMode', 'masonry')"
      >
        <i class="ri-layout-masonry-line"></i>
        <span>瀑布流</span>
      </button>
    </div>
  </div>
</template>

<script setup>
defineProps({
  viewMode: {
    type: String,
    default: 'grid',
  },
})

defineEmits(['update:viewMode'])

defineOptions({ name: 'PhotosToolbar' })
</script>

<style lang="scss" scoped>
// 工具栏
.photos-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;

  .view-options {
    display: flex;
    gap: 0.5rem;

    .view-option {
      padding: 0.5rem 0.875rem;
      background: var(--bg-color-light);
      border: none;
      border-radius: 0.375rem;
      color: var(--text-color-secondary);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease;

      i {
        font-size: 1.125rem;
      }

      &:hover {
        background: var(--bg-color-lighter);
        color: var(--text-color);
      }

      &.active {
        background: var(--primary-color);
        color: white;
      }
    }
  }
}

// 暗色模式适配
:deep(html.dark) {
  .photos-toolbar {
    .view-options {
      .view-option {
        background: rgba(255, 255, 255, 0.05);

        &:hover {
          background: rgba(255, 255, 255, 0.1);
        }

        &.active {
          background: var(--primary-color);
        }
      }
    }
  }
}
</style>
